<template>
  <a-table 
  :columns="columns" 
  :data-source="tableData" 
  :scroll="{ x: 'calc(700px + 30%)', y: 340 }"
  :pagination="pagination"
  :loading="loading"
  row-key="id"
  @change="handleChange"
  @resizeColumn="handleResizeColumn"
  > 
    <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'role'">
            <span>
                <a-tag color="cyan">{{ record.role }}</a-tag>
            </span>
      </template>
        <template v-if="column.key === 'organization'">
            <span>
                <a-tag>{{ record.organization }}</a-tag>
                
            </span>
      </template>
        <template v-if="column.key === 'status'">
            <span>
                <a-switch 
                v-model:checked="record.status"
                @change="onChange" 
                checked-children="开启" 
                un-checked-children="关闭" />
            </span>
      </template>
      <template v-else-if="column.key === 'operation'">
        <div style="display: flex;">
            <a-button type="link">
                <template #icon>
                    <EditOutlined />
                </template>
                <span style="margin-left: 5px;" @click="onEdit(record)">修改</span>   
            </a-button>
            <a-button danger type="link" style="display: flex; flex-direction: row-reverse;align-items: center;">
                <span style="margin-right: 5px;" @click="onDelete(record)">删除</span>
                <template #icon>
                    <DownOutlined />
                </template>
            </a-button>
        </div>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import { getUserList } from '@/api/user/user';
import { 
    EditOutlined,
    DownOutlined
} from '@ant-design/icons-vue';
import type { TableColumnsType, TableProps } from 'ant-design-vue';
import { onMounted, reactive, ref } from 'vue';
import { defineProps } from 'vue';
    
interface DataItem {
  id: number;
  account: string;
  name: string;
  role: string;
  phone: string;
  organization: string;
  status: boolean;
}

interface Props {
    jsonData: any[]
}

const columns = ref<TableColumnsType>([])
const tableData = ref<DataItem>()
const loading = ref<boolean>(false)
const pagination = reactive({
    current: 1,
    pageSize: 10,
    total: 0,
    showSizeChanger: true,
    showTotal: (total: number) => `共${total}条`
})

const props = defineProps<Props>()
props.jsonData.map(item => {
    //
    if(item.index === 'tableView'){
        columns.value = item.content.table.columns
        console.log(item.content);
        
    }
})

const loadTableData = async () => {
    loading.value = true
    try{
        const res = await getUserList({
          current: pagination.current,
          pageSize: pagination.pageSize
        })
        tableData.value = res.data.list;
        pagination.total = res.data.total
    }finally{
        loading.value = false
    }
}

onMounted(() => {
    loadTableData()
})

// const emits = defineEmits(['change', 'edit', 'delete', 'status'])
function handleResizeColumn(w: any, col: { width: any; }) {   
  col.width = w;
}

const handleChange :TableProps['onChange'] = (pag: any) => {
    pagination.current = pag.current as number
    pagination.pageSize = pag.pageSize as number
    loadTableData()
    // emits('change',{
    //     current: pag.current as number,
    //     pageSize: pag.pageSize as number
    // })
}

const onChange = (e: boolean) => {
    //发起请求，切换账号状态
    // emits('status', e)
}

const onEdit = ( recordInfo: DataItem ) => {
    // emits('edit', recordInfo)
}

const onDelete = ( recordInfo: DataItem ) => {
    // emits('delete', recordInfo)
}
</script>

